$(function () {
    const id = location.search.split("=")[1];
    
   // 日历插件  
   laydate.render({
    elem: '#calendars' //指定元素
    , value: new Date
    , min: new Date().toLocaleString(),//不能小于当前时间
    });


    // 放大镜
    class Magnifier {
        constructor() {
            // 选择元素
            this.sBox = document.querySelector(".banner-1");
            this.bBox = document.querySelector(".b_box");
            this.sSpan = document.querySelector(".banner-1 span");
            this.bImg = document.querySelector(".b_box img");
            // 绑定事件
            this.addEvent();
        }
        addEvent() {
            const that = this;
            // 实现绑定事件
            // 进入
            this.sBox.onmouseover = function () {
                // 显示
                that.show()
            }
            // 离开
            this.sBox.onmouseout = function () {
                // 隐藏
                that.hide()
            }
            // 移动
            this.sBox.onmousemove = function (eve) {
                const e = eve || window.event;
                that.move({
                    x: e.pageX,
                    y: e.pageY
                })
            }
        }
        show() {
            // 显示
            this.bBox.style.display = "block";
            this.sSpan.style.display = "block";
            // 根据比例计算遮罩层的尺寸
            this.sSpan.style.width = this.bBox.offsetWidth / this.bImg.offsetWidth * this.sBox.offsetWidth + "px";
            this.sSpan.style.height = this.bBox.offsetHeight / this.bImg.offsetHeight * this.sBox.offsetHeight + "px";
            // console.log(this.sSpan.style.width)
        }
        hide() {
            // 隐藏
            this.bBox.style.display = "none";
            this.sSpan.style.display = "none";
        }
        move(ops) {
            // 计算遮罩层要移动的距离
            let l = ops.x - this.sSpan.offsetWidth / 2 - this.sBox.offsetLeft;
            let t = ops.y - this.sSpan.offsetHeight / 2 - this.sBox.offsetTop

            // 边界限定
            if (l < 0) l = 0;
            if (t < 0) t = 0;
            if (l > this.sBox.offsetWidth - this.sSpan.offsetWidth) {
                l = this.sBox.offsetWidth - this.sSpan.offsetWidth
            }
            if (t > this.sBox.offsetHeight - this.sSpan.offsetHeight) {
                t = this.sBox.offsetHeight - this.sSpan.offsetHeight
            }

            // 将计算好并边界限定之后的距离设置给遮罩层
            this.sSpan.style.left = l + "px";
            this.sSpan.style.top = t + "px";

            // 计算遮罩层移动的比例
            const x = l / (this.sBox.offsetWidth - this.sSpan.offsetWidth);
            const y = t / (this.sBox.offsetHeight - this.sSpan.offsetHeight);
            // console.log(x, y)

            // 根据比例计算右侧大图要移动的距离
            this.bImg.style.left = x * (this.bBox.offsetWidth - this.bImg.offsetWidth) + "px";
            this.bImg.style.top = y * (this.bBox.offsetHeight - this.bImg.offsetHeight) + "px";
        }
    }
    var aimg = null;
    var img = null;
    var aa = null;
    $.ajax({
        url: "http://localhost:3000/api?type=goods",
        success: res => {
            res = JSON.parse(res).data;
            // console.log(res);
            // console.log(res.data);
            // console.log(id);
            let k = 0;
            res.some((val, idx) => {
                k = idx;
                return val.id === id;
            })
            // console.log(id)
            // console.log(res)
            // console.log(res[i].proImg)

            $(".banner-1").html(`${createImg(res[k].simg)}<span></span>`);
            $(".b_box").html(`<img src="${res[k].simg[0]}" alt="">`);
            $(".banner-6").html(`${createImg(res[k].simg)}`)
            function createImg(data, type) {
                let str = "";
                for (var i = 0; i < data.length; i++) {

                    if (i == 0) {
                        if (type != 1) {
                            str += `<img src="${data[i]}" alt="" class="banner-6-1">`
                        } else {
                            str += `<img src="${data[i]}" alt="" >`
                        }
                    } else {
                        str += `<img src="${data[i]}" alt="" >`
                    }

                }
                return str;
            }

            $(".banner-2").html(` <div class="b_box">
        </div> <p class="banner-2-p">${res[k].name}</p>
                <div class="banner-2-1">
                    <span>材料：</span>
                    <span>${res[k].cl}</span>
                </div>
    
                <div class="banner-2-1">
                    <span>包装：</span>
                    <span>${res[k].bz}</span>
                </div>
                <div class="banner-2-1">
                    <span>附送：</span>
                    <span>下单填写留言，免费赠送贺卡</span>
                </div>
                <div class="banner-2-1">
                    <span>配送：</span>
                    <span>全国送货上门，市区免运费</span>
                </div>
    
                <div class="banner-3">优惠券：&nbsp; &nbsp;暂无优惠券</div>
    
                <div class="banner-4">
                    <p>配送时间</p>
                    <input type="text" class="banner-4-1"  id="calendars">
                    <select name="banner-4-2" id="banner-4-2">
                        <option value="不限时间">不限时间</option>
                        <option value="8:00-10:00">8:00-10:00</option>
                        <option value="10:00-12:00">10:00-12:00</option>
                        <option value="12:00-14:00">12:00-14:00</option>
                        <option value="14:00-16:00">14:00-16:00</option>
                        <option value="16:00-18:00">16:00-18:00</option>
                        <option value="18:00-20:00">18:00-20:00</option>
                        <option value="20:00-22:00">20:00-22:00</option>
                        <option value="上午">上午</option>
                        <option value="下午">下午</option>
                        <option value="晚上">晚上</option>
                    </select>
    
                    <select name="banner-4-3" id="banner-4-3">
                        <option value="市区免费配送">市区免费配送</option>
                        <option value="近郊+30配送费">近郊+30配送费</option>
                        <option value="远郊+30配送费">远郊+30配送费</option>
                    </select>
                </div>
                <div class="banner-5">
                <p class="banner-5-1">
                    <span>店铺价</span>
                    <span class="banner-5-1-1">${res[k].price}</span>
                </p>
                <p class="banner-5-2">
                    <span>市场价</span>
                    <span>
                        <del>${res[k].scj}</del>
                        </span>
                    <span class="banner-5-2-1">
                        <span>销量</span>
                        <span class="red">${res[k].xl}</span>
                        <span>笔</span>
                    </span>
                </p>
            </div>
    
            `)

            $(".ff").html(`<a href="index.html">首页</a> ><a href="">鲜花</a>>
         <span>${res[k].name}</span>`)
            $(".banner-1").html(`${createImg(res[k].simg, 1)}<span></span>`);
            $(".b_box").html(`<img src="${res[k].simg[0]}" alt="">`);
            $(".banner-6").html(`${createImg(res[k].simg, 2)}`)

            new Magnifier();

            // 选项卡切换
            aimg = document.querySelectorAll(".banner-6 img");
            img = document.querySelectorAll(".banner-1 img");
            aa = document.querySelector(".b_box img");
            // var aa = $('.b_box').html();
            for (var i = 0; i < aimg.length; i++) {
                aimg[i].ly_xuhao = i;
                aimg[i].onclick = function () {
                    for (var j = 0; j < aimg.length; j++) {
                        aimg[j].className = '';
                        img[j].style.display = "none";
                    }

                    this.className = "banner-6-1";
                    // console.log(img[this.ly_xuhao].style.display)
                    aa.src = img[this.ly_xuhao].src;
                    img[this.ly_xuhao].style.display = "block";
                }
            }
        }
    })


 


    // 获取二维码图片内容
    var oimg = document.getElementById("img");
    var owx = document.getElementById("wx");
    // $('.left img').hide();
    // $('#wx').mouseover(function(){
    //     $('#img').show();
    // }).mouseout(function(){
    //     $('#img').hide();
    // })

    owx.onmouseover = function () {
        oimg.style.display = "block";
    }
    owx.onmouseout = function () {
        oimg.style.display = "none";
    }


    // 手机下单图片内容
    var ophone = document.getElementById("phone");
    var orders = document.getElementById("rders");
    ophone.onmouseover = function () {
        orders.style.display = "block";
    }

    ophone.onmouseout = function () {
        orders.style.display = "none";
    }

    //设置二级菜单显示
    var nav = document.querySelector(".nav-1");
    var box = document.querySelector(".obox");

    nav.onmouseover = function () {
        box.style.display = "block";
    }
    nav.onmouseout = function () {
        box.style.display = "none";
    }


    //二级菜单内容移入移出事件
    var box = document.querySelector(".obox");

    box.onmouseover = function () {
        box.style.display = "block";
    }
    box.onmouseout = function () {
        box.style.display = "none";
    }







    //点击按钮事件
    var ol = document.querySelector(".banner-7-1-1");
    var ot = document.querySelector(".banner-7-1-2");
    var or = document.querySelector(".banner-7-1-3");
    var n = ot.value - 0;

    or.onclick = function () {
        if (n < 1) {
            n = 1;
        } else {
            n += 1;
        }
        ot.value = n;
    }
    ol.onclick = function () {
        if (n > 1) {
            n -= 1;
        } else if (n <= 1) {
            alert("数量最低不小于1")
        }
        ot.value = n;
    }

    
})
